import Vue from 'vue'
import VueRouter, { NavigationGuardNext, Route, RouteConfig } from 'vue-router'
import DefaultLayout from '@/layouts/Default.vue'
import { getCookies } from '@/utils/cookie'
import { ACCESS_TOKEN } from '@/utils/constants'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/login',
    name: 'login',
    meta: {
      title: '登录'
    },
    component: () => import(/* webpackChunkName: "login" */'@/pages/Login.vue')
  },
  {
    path: '/',
    component: DefaultLayout,
    children: [
      {
        path: '', // 默认子路由
        name: 'home',
        component: () => import(/* webpackChunkName: 'home' */ '@/pages/Home.vue')
      },
      {
        path: '/role',
        name: 'role',
        component: () => import(/* webpackChunkName: 'role' */ '@/pages/role/index.vue')
      },
      {
        path: '/menu',
        name: 'menu',
        component: () => import(/* webpackChunkName: 'menu' */ '@/pages/menu/index.vue')
      },
      {
        path: '/resource',
        name: 'resource',
        component: () => import(/* webpackChunkName: 'resource' */ '@/pages/resource/index.vue')
      },
      {
        path: '/course',
        name: 'course',
        component: () => import(/* webpackChunkName: 'course' */ '@/pages/Course.vue')
      },
      {
        path: '/user',
        name: 'user',
        component: () => import(/* webpackChunkName: 'user' */ '@/pages/user/index.vue')
      },
      {
        path: '/advert',
        name: 'advert',
        component: () => import(/* webpackChunkName: 'advert' */ '@/pages/Advert.vue')
      },
      {
        path: '/advert-space',
        name: 'advert-space',
        component: () => import(/* webpackChunkName: 'advert-space' */ '@/pages/AdvertSpace.vue')
      },
      {
        path: '/menu/create',
        name: 'menu-create',
        component: () => import(/* webpackChunkName: 'menu-create-edit' */ '@/pages/menu/create.vue')
      },
      {
        path: '/menu/:id/edit',
        name: 'menu-edit',
        component: () => import(/* webpackChunkName: 'menu-create-edit' */ '@/pages/menu/create.vue')
      },
      {
        path: '/role/:roleId/alloc-menu',
        name: 'alloc-menu',
        component: () => import(/* webpackChunkName: 'alloc-menu' */ '@/pages/role/AllowMenu.vue'),
        props: true // 将路由路径参数映射到组件的 props 数据中
      },
      {
        path: '/role/:roleId/alloc-resource',
        name: 'alloc-resource',
        component: () => import(/* webpackChunkName: 'alloc-menu' */ '@/pages/role/AllowResource.vue'),
        props: true // 将路由路径参数映射到组件的 props 数据中
      }
      // {
      //   path: '/course/create',
      //   name: 'course-create',
      //   component: () => import(/* webpackChunkName: 'course-create' */ '@/pages/course/create.vue')
      // },
      // {
      //   path: '/course/:courseId/edit',
      //   name: 'course-edit',
      //   component: () => import(/* webpackChunkName: 'course-edit' */ '@/pages/course/edit.vue'),
      //   props: true
      // },
      // {
      //   path: '/course/:courseId/section',
      //   name: 'course-section',
      //   component: () => import(/* webpackChunkName: 'course-section' */ '@/pages/course/section.vue'),
      //   props: true
      // },
      // {
      //   path: '/course/:courseId/video',
      //   name: 'course-video',
      //   component: () => import(/* webpackChunkName: 'course-video' */ '@/pages/course/video.vue'),
      //   props: true
      // }
    ]
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to: Route, from: Route, next: NavigationGuardNext) => {
  const token = getCookies(ACCESS_TOKEN)

  if (to.name !== 'login') {
    if (token) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

export default router
